<style>
    th{background-color:#f1f1f1}
    .nav{margin-bottom: 2px}
    #add{float:right}
</style>
<ul class="breadcrumb">当前位置：
    <a href="#">首页</a> <span class="divider">/</span>
    <a href="#">前台</a> <span class="divider">/</span>
    BANNER设置
</ul>
<div class="title_right"><strong>BANNER设置</strong></div>
<div style="margin:auto">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="{:Url('index/bnr')}">BANNER设置</a></li>
        <li role="presentation"><a href="{:Url('index/menuset')}">菜单设置</a></li>
    </ul>
    <button class="btn btn-primary" id="add">新增BANNER</button>
    <table class="table table-bordered table-hover table-condensed" id="bnrtab">
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>分类</th>
            <th>图片路径</th>
            <th>排序</th>
            <th>指向路径</th>
            <th>状态</th>
            <th>打开方式</th>
            <th>操作</th>
        </tr>
        <?php if(!empty($banner) && is_array($banner)):?>
           <?php foreach ($banner as $k=>$v):?>
            <tr>
                <td>{$v['id']}</td>
                <td>{$v['homeTitle']}</td>
                <td>{$v['homeType']}</td>
                <td>{$v['homeImg']}</td>
                <td>{$v['homeSort']}</td>
                <td>{$v['homeUrl']}</td>
                <td>{$v['isDeleted'] ? '正常':'禁用'}</td>
                <td>{$v['openType'] == '_self' ? '当前页':'新页面'}</td>
                <td><a href="#">删除</a></td>
            </tr>
           <?php endforeach;?>
        <?php endif;?>
    </table>
</div>

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>添加BANNER</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="homeTitle">标题</label>
                <div class="controls">
                    <input type="text" id="homeTitle" placeholder="标题" name="homeTitle" value="">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="homeType">分类</label>
                <div class="controls">
                    <input type="text" id="homeType" placeholder="分类" name="homeType" value="">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="homeImg">图片路径</label>
                <div class="controls">
                    <input type="file" id="homeImg" name="homeImg" value="" accept="image/jpeg,image/png"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="homeSort">排序</label>
                <div class="controls">
                    <input type="number" min="0" step="1" id="homeSort" value="1" name="homeSort">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="homeUrl">指向路径</label>
                <div class="controls">
                    <input type="text" id="homeUrl" value="" placeholder="跳转路径" name="homeUrl">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">状态</label>
                <div class="controls">
                    <label class="radio inline">
                        <input type="radio" name="isDeleted" id="id_deleted1" value="1" checked>正常
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="isDeleted" id="id_deleted2" value="0">禁用
                    </label>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">打开方式</label>
                <div class="controls">
                    <label class="radio inline">
                        <input type="radio" name="openType" id="openType" value="_self" checked>当前页
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="openType" id="openType2" value="_blank">新页面
                    </label>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="button" class="btn" id="sub">确定添加</button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">关闭</a>
    </div>
</div>

<script>
    var apiUrl = '/api/AdminApi/';
    $(function () {
        $('#add').click(function () {
            $('#myModal').modal('show');
        });

        $('#sub').click(function () {
            var ary = $('form').serializeArray();
            var flag = 1;
            var html = '<label style="float:right;text-align:left;color:red" class="control-label">请填写该字段</label>';
            var html2 = '<label style="float:right;text-align:left;color:red" class="control-label">图片不得超过2M</label>';

            $.each(ary,function (i,item) {
                $('#'+item['name']).next('label').remove();
                if($.trim(item['value']) == ''){
                    flag = 0;
                    $('#'+item['name']).parent().append(html);
                }
            });

            $('#homeImg').next('label').remove();
             if($('#homeImg')[0].files.length == 0){
                $('#homeImg').parent().append(html);
                flag = 0;
            }else if($('#homeImg')[0].files[0].size > 2048000) {
                $('#homeImg').parent().append(html2);
                flag = 0;
            }
            if(!flag) return false;

            var oData = new FormData();
            oData.append('file',$('#homeImg')[0].files[0]);
            oData.append('homeTitle',$.trim($('#homeTitle').val()));
            oData.append('homeType',$.trim($('#homeType').val()));
            oData.append('homeSort',$.trim($('#homeSort').val()));
            oData.append('homeUrl',$.trim($('#homeUrl').val()));
            oData.append('isDeleted',$('input[name="isDeleted"]:checked').val());
            oData.append('openType',$('input[name="openType"]:checked').val());


          $.ajax({
               url:apiUrl+'addBnr',
               type:'post',
               data:oData,
               processData:false,
               contentType:false,
               async:false,
               success:function (e) {
                   if(e.status == 0){
                       $('#sub').next('label').remove();
                       var html = '<label style="float:right;text-align:left;color:red" class="control-label">'+e.msg+'</label>';
                       $('#sub').parent().append(html);
                   }else{
                       var openType = oData.get('openType') == '_self' ? '当前页':'新页面';
                       var isDeleted = oData.get('isDeleted') == 1 ? '正常':'禁用';
                       var html = '<tr>';
                           html+='<td>'+e.homeId+'</td>';
                           html+='<td>'+oData.get("homeTitle")+'</td>';
                           html+='<td>'+oData.get("homeType")+'</td>';
                           html+='<td>'+e.homeImg+'</td>';
                           html+='<td>'+oData.get("homeSort")+'</td>';
                           html+='<td>'+oData.get("homeUrl")+'</td>';
                           html+='<td>'+isDeleted+'</td>';
                           html+='<td>'+openType+'</td>';
                           html+='<td><a href="#">删除</a></td>';
                           html+='</tr>';
                       $('#bnrtab>tbody').append(html);
                       $('#myModal').modal('hide');
                   }
               }
          });
        })
    })
</script>